<template>
	<view class="header-contianer">
		<view class="header" v-if="user">				
			<view class='my-avatar'>
				<view class="image" :style="'background: url('+user.avatar+');background-repeat: no-repeat;background-size:cover;'"></view>
			</view>
			<view class="userinfo">
				<view class="nickname">{{user.nickname}}</view>
				<view class="mobile" v-if="user.mobile">绑定手机：
					<text>{{user.mobile}}</text>
				</view>
				<view class="storename" v-if="page=='shop'">
					<text>我的积分：</text>
					<text>{{user.score}}</text>
				</view>
				<view class="storename" v-if="page=='admin'">
					<text>贸易商：</text>
					<text>{{channel.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		name: 'userheader',
		data() {
			return {
				user:'',
				customer:'',
				channel:'',
				role:''
			}
		},
		props:{
			page:{
				type: String,
				default: ''
			},
			post:{
				type:Object,
				default:{}
			}
		},
		created() {
			this.init();
		},
		methods: {
			...methods,
			init:function(){
				this.$get('user/userinfo',{...this.post,page:this.page},true).then(res=>{
					this.user=res.user;
					uni.setStorageSync('userinfo', res.user);
					if(this.page=='shop'){
						this.$emit('onGetUserinfo',{						
							month_buy:res.month_buy,
							last_month_yuefu:res.last_month_yuefu,
							this_month_yuefu:res.this_month_yuefu
						});
					}
					if(this.page=='admin'){
						this.channel=res.channel;
						this.$emit('onGetUserinfo',{
							role:res.role,
							gird:res.gird,
							driver:res.driver,
							apply:res.apply,
							store:res.store,
							jingli:res.jingli,
							jiesuan:res.jiesuan,
							shouyi:res.shouyi,
							wuliu:res.wuliu,
							coupon:res.coupon
						});
					}
					if(this.page=='driver'){
						this.$emit('onGetUserinfo',{
							channel:res.channel,
							customer:res.customer
						});
					}
				}).catch(e=>{
					setTimeout(()=>{
						this.$reLaunch('index/index');
					},1500);
				});
			},
			reload:function(){
				this.init();
			}
		}
	}
</script>

<style lang="scss">
.header-contianer{
	padding: 20rpx;
	padding-bottom: 10rpx;
	.header{
		background-color: rgba(48, 216, 231, 0.3);
	}
	.userinfo{
		color: #222222;
	}
}
.header{
	width: 100%;
	height: 180rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.my-avatar {
		width: 25%;
		display: flex;
		justify-content: center;
		.image{
			padding: 10rpx;
			border-radius: 50%;
			width: 130rpx;
			height: 130rpx;
		}
	}
	.userinfo{
		width: 75%;
		display: flex;
		flex-direction: column;
		height: 150rpx;
		font-size: 24rpx;		
		justify-content: space-around;
	}
}
</style>
